<template>
    <Popup :class="`tech-popup ${mode} ${styleMode}`" v-model="value" :close-on-click-overlay="overlayClose" position="bottom" :get-container="container">
        <div class="popup-title border-black-color">
            <div class="popup-name">{{title}}</div>
            <MiniIcon v-if="haveClose" class="tech-popup-close-icon" name="close" :mode="mode" theme="#7D7D83" :styleMode="styleMode" is-stop @click="close" />
        </div>
        <div class="popup-content">
            <slot></slot>
        </div>
        <div class="popup-footer">
            <slot name="button">
                <Button v-if="!noButton" :style="themeBackround" :round="buttonRound" size="large" @click="close">取消</Button>
            </slot>
        </div>
    </Popup>
</template>

<script>
import { Popup, Button } from 'vant';
import MiniIcon from './MiniIcon';
import ModeMixin from '@common/mixin';
export default {
    name: 'TechPopup',
    mixins: [ModeMixin],
    components: {
        Popup,
        Button,
        MiniIcon,
    },
    props: {
        value: Boolean,
        title: {
            type: String,
            default: 'TechPopup',
        },
        noButton: {
            type: Boolean,
            default: false,
        },
        haveClose: {
            type: Boolean,
            default: true,
        },
        container: String,
        overlayClose: {
            type: Boolean,
            default: false,
        },
    },
    model:{
        prop: 'value',
    },
    computed: {},
    methods: {
        close() {
            this.$emit('close');
        },
    },
};
</script>

<style lang="less" scoped>
.tech-popup {
    max-height: 85vh;
    overflow: hidden;
    .mode-white();
    &.circle {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }
    .popup-title {
        height: 50px;
        line-height: 50px;
        .flex();
        align-items: center;
        .p-h(@gap-lg);
        .popup-name {
            .font-size-md();
            font-weight: @font-weight-bold;
            .t-l();
        }
        .tech-popup-close-icon {
            position: absolute;
            right: @gap-md;
        }
    }
    .popup-content {
        .p(@gap-md);
        .scroll-y();
        max-height: 60vh;
    }
    .popup-footer {
        .p(@gap-md);
        padding-bottom: @gap-md;
        padding-bottom: calc(@gap-md + constant(safe-area-inset-bottom));
        padding-bottom: calc(@gap-md + env(safe-area-inset-bottom));
    }
}
</style>

